<template>
    <div class="check-box pointer" @mouseenter="enter()" @mouseleave="leave()" @click.stop="choose">
        <img v-show="!isHover && checked" src="@/assets/icon/checkbox/choose.png">
        <img v-show="isHover" src="@/assets/icon/checkbox/hover.png">
        <img v-show="!isHover && !checked" src="@/assets/icon/checkbox/null.png">
    </div>
</template>

<script>
  export default {
    name: "CheckBox",
    props:{
      status:{
        type:Boolean,
        default:function () {
          return false
        }
      },
      checked:{
        type:Boolean,
        default:function () {
          return false
        }
      }
    },
    data(){
      return{
        isHover:false
      }
    },
    methods:{
      enter:function () {
        this.isHover = true
      },
      leave:function () {
        this.isHover = false
      },
      choose:function () {
        this.$emit('clickBox',!this.checked)
      }

    }
  }
</script>

<style scoped>
    .check-box{
        height: 12px;
        width: 12px;
        margin: auto;
        position: relative;
    }
    .check-box img{
        position: absolute;
        height: 12px;
        width: 12px;
    }

</style>
